<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>loginProviders Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body>
<main role="main" class="container mt-3 mb-3">
    <div th:fragment="qrAuthentication" th:remove="tag">

        <script type="text/javascript" th:src="@{#{webjars.socket.js}}"></script>
        <script type="text/javascript" th:src="@{#{webjars.stomp.js}}"></script>

        <div class="card bg-light">
            <div class="card-body pb-4">
                <div class="card-title">
                    <div class="text-center">
                        <h3 class="mt-md-0 mt-4">
                            <i class="mdi mdi-qrcode-scan"></i>
                            <span>Login with QR Code</span>
                        </h3>
                        <section>
                            <div id="qrerror" class="banner banner-danger banner-dismissible" style="display:none;">
                                <p th:utext="#{cas.authn.qr.fail}">Error</p>
                            </div>
                        </section>
                        <p>Scan the QR code with your mobile device to begin the login flow. If your credentials
                            are accepted, you will automatically proceed to the next step.</p>
                    </div>
                </div>
                <div class="card-text">
                    <center>
                        <img th:src="@{'data:image/jpeg;base64,' + ${qrCode}}"/>
                        <p>
                            Your mobile device must communicate with CAS using the following channel id.

                            <section class="cas-field my-3 mdc-input-group">
                                <div class="mdc-input-group-field mdc-input-group-field-append">
                                    <div class="d-flex">
                                        <label for="token" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
                                            <input class="mdc-text-field__input pwd"
                                                   type="text"
                                                   name="qrchannel"
                                                   id="qrchannel"
                                                   th:value="${qrChannel}"
                                                   size="50"
                                                   readonly
                                                   autocomplete="off" required />
                                            <span class="mdc-notched-outline">
                                                <span class="mdc-notched-outline__leading"></span>
                                                <span class="mdc-notched-outline__notch">
                                                  <span class="mdc-floating-label" />ID</span>
                                                </span>
                                                <span class="mdc-notched-outline__trailing"></span>
                                            </span>
                                        </label>

                                    </div>
                                </div>
                                <button onclick="copyClipboard(document.getElementById('qrchannel'))"
                                        class="mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                                        type="button">
                                    <i class="mdi mdi-content-copy"></i>
                                    <span class="sr-only">Copy</span>
                                </button>
                            </section>

                        </p>
                    </center>
                </div>
            </div>
        </div>
        
        <form method="post" id="qrform">
            <input id="token" name="token" type="hidden" />
            <input id="deviceId" name="deviceId" type="hidden" />
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="validate"/>
        </form>
        
        <script th:inline="javascript">
            /*<![CDATA[*/
            var endpoint = /*[[@{/qr-websocket}]]*/  ;
            var topic = /*[[${qrChannel}]]*/  ;
            var prefix = /*[[${qrPrefix}]]*/  ;

            var stompClient = null;
            $(function () {
                var socket = new SockJS(endpoint);
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function (frame) {
                    stompClient.subscribe(prefix + '/' + topic + '/verify', function (result) {
                        console.log(result.body);
                        let body = JSON.parse(result.body);
                        if (body.error) {
                            $("#qrerror").show();
                        } else if (body.success) {
                            stompClient.disconnect();
                            $("#qrerror").hide();
                            $("#qrform #token").val(body.token);
                            $("#qrform #deviceId").val(body.deviceId);
                            $("#qrform").submit();
                        }
                    });
                });
            });

            /*]]>*/
        </script>

        <form method="post" id="submitForm" th:action="@{/login}">
            <input type="hidden" id="eventId" name="_eventId" value="submit"/>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
        </form>
        
    </div>
</main>
</body>
</html>
